<template>
	<div style="margin-bottom: 30px">
		<div class="box-title">{{ props.title }}</div>
		<el-space wrap>
			<el-card
				v-for="item in props.itemList"
				:key="item.id"
				class="w-135px h-250px cursor-pointer"
				shadow="hover"
				@click="to(item.id)"
			>
				<div  style="width: 133px;height: 177px;margin-bottom: 5px">
					<el-image
						style="width: 133px; height: 177px"
						:src="item.img"
					></el-image>
					<div class="wave"></div>
				</div>

				<div class="truncate1">
					{{ item.introduction }}
				</div>
			</el-card>
		</el-space>
	</div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps<{
	title: any
	itemList: any
}>()

/**
 * 详情页跳转
 * @param id
 */
function to(id: any) {
	router.push(`/itemInfo/${id}`)
}
</script>
<style scoped>

 .wave {
	position: absolute;
	left: 0;
	right: -1px;
	bottom: -2px;
	padding-bottom: 8.648649%;
	background: url(//resource.mhxk.com/kanman_pc/static/images/comm/wave.png) no-repeat 0 100%;
	background-size: 50% 100%;

}

.box-title {
	width: 100%;
	text-align: center;
	font-size: 32px;
	font-weight: 600;
	color: #222;
	line-height: 45px;
	margin-bottom: 12px;
}
img {
	width: 24px;
	height: 24px;
	margin-right: 0;
	vertical-align: middle;
	border: none;
}

.truncate1 {
	font-size: 13px;
	width: 133px;
	height: 73px;
	display: -webkit-box;          /* 为了支持 Safari */
	-webkit-box-orient: vertical; /* 垂直排列 */
	-webkit-line-clamp: 3;        /* 显示的行数，这里是 3 行 */
	overflow: hidden;              /* 隐藏超出部分 */
	line-height: 1.5;             /* 行高 */
	max-height: 4.5em;             /* 根据行高和行数设置最大高度 */
}
</style>
